
import { PropType, defineComponent } from "vue";
import classes from "./index.module.scss"
import { ConditionItemType, ToolsItemType, renderElement } from "@/hooks/useElementFormItem";
import { ElCol, ElRow,ElButton } from "element-plus"
import { renderLabel } from "@/hoc/renderLabel";
import { debounce } from "@Tea/utils";


export const WorkArea = defineComponent({
  props: {
    tools: {
      type: Array as PropType<ToolsItemType[]>
    },
    condition: {
      type: Array as PropType<ConditionItemType[]>
    },
    onSearch: {
      type: Function as PropType<(...args:any[])=>any>
    }
  },
  setup(props, ctx) {
    return () => {
      console.log(props.condition);
      
      // 这里新增 workArea 类名 是因为 scss 模块化为无法修改 elemenet-ui 中的样式
      return (
        <div class={`${classes.workArea} workArea m-window`}>
          {
            props.tools && <div class={`${classes.tool} `}>
              {
                props.tools.map((item) => renderElement(item))
              }
            </div>
          }
          {
            props.condition && <div class={`${classes.condition}`}>
              <ElRow>
                {
                  props.condition.map((item, index) => (
                    <ElCol span={item.col || 4} key={index}>
                      {renderLabel({
                        label: item.label,
                        labelWidth: item.labelWidth,
                        VNode: renderElement(item)
                      })}
                    </ElCol>
                  ))
                }
                {props.onSearch && <ElCol span={4}>
                  {/* 防抖函数，限制短时间内多次调用 */}
                  <ElButton type="primary" onClick={debounce(props.onSearch, 200)} class={`${classes.search}`}>查询</ElButton>
                </ElCol>}
              </ElRow>
            </div>
          }
        </div>
      )
    }
  },
})